import styled from 'styled-components'
import border from 'components/styled/border'
const CateCnotainer = styled.div`
    header{
        height:.44rem;
        background:#ee742f;
        display:flex;
        justify-content:center;
        align-items:center;
        ul{
            width:1.4rem;
            height:.3rem ;
            display:flex;
            position: relative;
            li{
                flex:1;
                line-height:.3rem;
                text-align:center;
                &.active{
                    color:#ee742f;
                    z-index:10000;
                }
            }
            
            &:before{
                content:"";
                position: absolute;
                width:.7rem;
                height: .3rem;
                border-radius:.15rem;
                z-index:9999;
                background:#fff;
                transition:all 300ms;
            }
            &.left::before{
                transform:translate(0,0)
            }
            &.right::before{
                transform:translate(100%,0)
            }
        }
    
    }

`
const SlideContainer= border({
    color:'#fff',
    radius:15,
    comp:styled.ul`

    `
})

export {
    CateCnotainer,
    SlideContainer
   
}